
<template>
    <div class="btn-upload ">
        <i  class="iconfont icon-tianjiatupian" :style="iStyle"></i>
        <input  @change="change" class="input-img" type="file" name="addImg" id="addImg" value="" accept="image/*"/>
    </div>
</template>
<script>
export default {
  data () {
    return {
      imgurl: ''

    }
  },
  props: {
    color: {
      type: String,
      default: '#666'
    },
    size: {
      type: String,
      default: '25'
    }
  },
  computed: {
    iStyle () {
      return {
        border: '1px dashed ' + this.color,
        color: this.color,
        padding: (this.size / 3) + 'px' + ' ' + (this.size / 3 - 3) + 'px',
        fontSize: this.size + 'px'
      }
    }
  },
  methods: {
    getObjectURL (file) {
      var url = null
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
    change (e) {
      const files = e.target.files || e.dataTransfer.files
      if (!files.length) return
      var picValue = files[0]
      this.imgurl = this.getObjectURL(picValue)
      this.$emit('getuploadimg', { imgurl: this.imgurl, panel: true })
      e.target.value = ''
    }
  }
}
</script>

<style>
.btn-upload{position: relative;overflow: hidden;display: inline-block}
.btn-upload i{ border: 1px dashed #666;padding: 8px 5px ;font-size:25px;display: inline-block}
.btn-upload .input-img{ position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity:0;}

</style>
